<style>
    #mask {
        background-color: #ccc;
        opacity: 0.5;
        filter: alpha(opacity=50);
        position: absolute;
        left: 0;
        top: 0;
        z-index: 1000;
    }

    #login {
        position: fixed;
        width: 500px;
        height: 300px;
        z-index: 1001;
        background: white;
        border-radius: 15px;
        overflow: auto;
    }

    b:before {
        content: " ";
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        height: 1px;
        border-top: 1px solid #D9D9D9;
        color: #D9D9D9;
        -webkit-transform-origin: 0 0;
        transform-origin: 0 0;
        -webkit-transform: scaleY(0.5);
        transform: scaleY(0.5);
        left: 15px;
    }

    .z {
        color: green;
    }

    .y {
        color: red;
    }
</style>
<div class="maintain-all">
    <div id="maintain">
        <input type="text" class="hidden" id="pages-input">
        <div class="forum" style=" margin-top: 0px;">
            <div style="background: #dee5f1; padding: 5px 15px;" class="clearfix">
                车辆管理
                <div style="padding: 0; float:right;">
                    <input type="text" id="input" class="weui-btn weui-btn_mini weui-btn_default" placeholder="请输入Vin号或手机号码" style="height: 26px; vertical-align: middle;border-radius: 5px;width: 171px;border: 1px solid #ddd;">
                    <a href="javascript:;" id="searchBTN" class="weui-btn weui-btn_mini weui-btn_primary js-add-class" style="vertical-align: middle;">搜索</a>
                    <a href="javascript:;" id="refreshBTN" class="weui-btn weui-btn_mini weui-btn_primary js-add-class" style="vertical-align: middle;">刷新</a>
                </div>
            </div>
            <div class="weui-cell weui-cell_access" style="border-bottom: 1px solid #d9d9d9;">
                <div class="weui-cell__bd" style="min-width: 45px"> <small>Vin号</small></div>
                <div class="weui-cell__bd" style="min-width: 45px"> <small>姓名</small></div>
                <div class="weui-cell__bd" style="min-width: 45px"><small>电话</small></div>
                <div class="weui-cell__bd" style="min-width: 45px"> <small>角色</small></div>
                <div class="weui-cell__bd" style="min-width: 45px"> <small>品牌</small></div>
                <div class="weui-cell__bd" style="min-width: 45px"> <small>车牌号</small></div>
                <div class="weui-cell__bd" style="min-width: 45px"> <small>状态</small></div>
                <div class="weui-cell__bd" style="min-width: 45px"> <small>操作</small></div>
            </div>
            <div class="weui-table weui-cells" id="carList" style="margin: 0;">
                <!-- <div class="weui-cell weui-cell_access b">
                    <div class="weui-cell__bd">
                        <small>xxx号</small>
                    </div>
                    <div class="weui-cell__bd">
                        <small>张三</small>
                    </div>
                    <div class="weui-cell__bd">
                        <small>18502332424</small>
                    </div>
                    <div class="weui-cell__bd">
                        <small>驾驶员</small>
                    </div>
                    <div class="weui-cell__bd">
                        <small>红岩</small>
                    </div>
                    <div class="weui-cell__bd">
                        <small>渝B13213</small>
                    </div>
                    <div class="weui-cell__bd">
                        <small style="color:green;">正常</small>
                    </div>
                    <div class="weui-cell__bd">
                        <a href="javascript:void (0)" style="font-size: 13px; color: white; vertical-align: middle;" class="weui-btn weui-btn_mini weui-btn_primary">编辑</a>
                        <a href="javascript:void(0)" style="font-size: 13px; color: white; vertical-align: middle;" class="weui-btn weui-btn_mini weui-btn_warn">删除</a>
                    </div>
                </div> -->
            </div>
            <div class="page-wrap" id="pages"></div>
        </div>
    </div>
</div>

<script>
    function ajax_page2(num) {
        var _val = $('#input').val();
        $('#pages-input').val(num);
        initPage(num, _val);
    };
    function initPage(page, val) {
        $.ajax({
            url: 'http://api.hongyanche.com/maintain_admin/vehicle_list',
            type: 'GET',
            data: {
                page: page,
                keywords: val
            },
            xhrFields:{
                withCredentials:true
            },
            success: function (data) {
                if (data.state) {
                    createHTML(data);
                } else {
                    TOAST.wran(data.errormsg, ' ', 1);
                }
            },
            error: function () {
                TOAST.wran('网络错误', ' ', 1);
            }
        })
    }
    function createHTML(data) {
        console.log(data);
        $('#carList').html('');
        $('#pages').html(data.page);
        var datas = data.data.list;
        datas.forEach(function (item) {
            var role;
            if (item.role === 1) {
                role = '使用者'
            } else {
                role = '拥有者'
            };
            var _a;
            var _b;
            if (item.abnormal === 0) {
                _a = 'z';
                _b = '正常';
            } else {
                _a = 'y';
                _b = '异常';
            }
            $('#carList').append(`
                            <div class="weui-cell weui-cell_access b">
                                <div class="weui-cell__bd">
                                    <small>${item.vin}</small>
                                </div>
                                <div class="weui-cell__bd">
                                    <small>${item.uname}</small>
                                </div>
                                <div class="weui-cell__bd">
                                    <small>${item.pnum}</small>
                                </div>
                                <div class="weui-cell__bd">
                                    <small>${role}</small>
                                </div>
                                <div class="weui-cell__bd">
                                    <small>${item.vehicle_brand}</small>
                                </div>
                                <div class="weui-cell__bd">
                                    <small>${item.vehicle_license_province + item.vehicle_license_number}</small>
                                </div>
                                <div class="weui-cell__bd">
                                    <small style="${_a}">${_b}</small>
                                </div>
                                <div class="weui-cell__bd">
                                    <a href="javascript:void (0)" data-id="${item.customer_id}" style="font-size: 13px; color: white; vertical-align: middle;" class="carEditor weui-btn weui-btn_mini weui-btn_primary">编辑</a>
                                    <a href="javascript:void(0)" data-id="${item.customer_id}" style="font-size: 13px; color: white; vertical-align: middle;" class="weui-btn weui-btn_mini weui-btn_warn js-net-delete">删除</a>
                                </div>
                            </div>
                            `)
        })
    }
    initPage(1);
    $('body').on('click', '#searchBTN', function() {
        var _val = $('#input').val();
        initPage(undefined, _val);
    });
    $('body').on('click', '#refreshBTN', function() {
        window.location.reload();
    });
    $('body').on('click', '.js-net-delete', function() {
        var _val = $('#input').val();
        var _page = $('#pages-input').val();
        var ID = $(this).attr('data-id');
        var DELETE = confirm('是否确认删除?');
        if (DELETE) {
            $.ajax({
            url: 'http://api.hongyanche.com/maintain_admin/vehicle_remove',
            type: 'POST',
            data: {
                customer_id: ID
            },
                xhrFields:{
                    withCredentials:true
                },
            success: function(data) {
                if (data.state) {
                    TOAST.success(data.errormsg, ' ', 1);
                    initPage(_page, _val);
                } else {
                    TOAST.wran(data.errormsg, ' ', 1);
                }
            },
            error: function(err) {
                TOAST.wran('网络错误 ', ' ', 1);
            }
        })
        } else {
            return;
        }
    });
    function createModalHTML(datas) {
        var _a;
        var _b;
        if (datas.role === 1) {
            _a = 'checked';
        } else if (datas.role === 2) {
            _b = 'checked';
        }
        $('#login').append(`
        <div class='weui-cells weui-cells__radius' style="margin: 0 10px;">
            <div class='weui-cell'>
                <div class='weui-cell__hd'>
                    <label class='weui-label'>vin</label>
                </div>
                <div class='weui-cell__bd'>
                    <input class='vehicle-create weui-input' info=1 name='vin' placeholder="请输入vin号" value="${datas.vin}" />
                </div>
            </div>
            <div class='weui-cell'>
                <div class='weui-cell__hd'>
                    <label class='weui-label'>角色</label>
                </div>
                <label href="javascript: void(0)">
                    <div class='weui-cell__bd'>
                        <input type="radio" class="weui-check vehicle-create" name="role" value="1" ${_a}>
                        <i class="weui-icon weui-icon-checked"></i>使用者
                    </div>
                </label>
                <label>
                    <div class='weui-cell__bd'>
                        <input type="radio" class="weui-check vehicle-create" name="role" value="2" ${_b}>
                        <i class="weui-icon weui-icon-checked"></i>拥有者
                    </div>
                </label>
            </div>
            <div class='weui-cell'>
                <div class='weui-cell__hd'>
                    <label class='weui-label'>姓名</label>
                </div>
                <div class='weui-cell__bd'>
                    <input class='vehicle-create weui-input' info=1 name='uname' placeholder="请输入姓名" value="${datas.uname}" />
                </div>
            </div>
            <div class='weui-cell'>
                <div class='weui-cell__hd'>
                    <label class='weui-label'>车辆所属</label>
                </div>
                <div class='weui-cell__bd'>
                    <select id="vehicle_license_province" class='vehicle-create weui-select' in1fo=1 name='vehicle_license_province' value="${datas.vehicle_license_province}" >
                        <option value=''>省</option>
                        <option value="京">京</option>
                        <option value="津">津</option>
                        <option value="沪">沪</option>
                        <option value="渝">渝</option>
                        <option value="冀">冀</option>
                        <option value="晋">晋</option>
                        <option value="辽">辽</option>
                        <option value="吉">吉</option>
                        <option value="黑">黑</option>
                        <option value="苏">苏</option>
                        <option value="浙">浙</option>
                        <option value="皖">皖</option>
                        <option value="闽">闽</option>
                        <option value="赣">赣</option>
                        <option value="鲁">鲁</option>
                        <option value="豫">豫</option>
                        <option value="鄂">鄂</option>
                        <option value="湘">湘</option>
                        <option value="粤">粤</option>
                        <option value="琼">琼</option>
                        <option value="川">川</option>
                        <option value="贵">贵</option>
                        <option value="云">云</option>
                        <option value="陕">陕</option>
                        <option value="甘">甘</option>
                        <option value="青">青</option>
                        <option value="藏">藏</option>
                        <option value="桂">桂</option>
                        <option value="蒙">蒙</option>
                        <option value="宁">宁</option>
                        <option value="新">新</option>
                    </select>
                </div>

                <div class='weui-cell'>
                    <div class='weui-cell__hd'>
                        <label class='weui-label'>车牌号码</label>
                    </div>
                    <div class='weui-cell__bd'>
                        <input class='vehicle-create weui-input' in1fo=1 name='vehicle_license_number' placeholder="请输入车牌号码" value = "${datas.vehicle_license_number} "/>
                    </div>
                </div>
            </div>

            <div class='weui-cell weui-cell_select'>
                <div class='weui-cell__hd'>
                    <label class='weui-label'>车辆品牌</label>
                </div>
                <div class='weui-cell__bd'>
                    <select id="vehicle_brand" class='vehicle-create weui-select' info=1 name='vehicle_brand'>
                        <option value=''>请输入车辆品牌</option>
                        <option value="上汽红岩">上汽红岩</option>
                        <option value="一汽解放">一汽解放</option>
                        <option value="中国重汽">中国重汽</option>
                        <option value="福田欧曼">福田欧曼</option>
                        <option value="东风商用车">东风商用车</option>
                        <option value="陕汽重卡">陕汽重卡</option>
                        <option value="华菱重卡">华菱重卡</option>
                        <option value="北奔重卡">北奔重卡</option>
                        <option value="联合卡车">联合卡车</option>
                    </select>
                </div>
            </div>
            <div class="weui-cell">
                <a href="javascript:void(0)" data-id="${datas.customer_id}" class=" weui-btn weui-btn_mini weui-btn_primary" id="edit">修改</a>
            </div>
        </div>
        `);
        $('#login').find('#vehicle_license_province').find(`option[value='${datas.vehicle_license_province}']`).attr("selected",true);
        $('#login').find('#vehicle_brand').find(`option[value='${datas.vehicle_brand}']`).attr("selected",true);
    };
    $('body').on('click', '.carEditor', function(evnent){
        var _ID = $(this).attr('data-id');
        openNew();
        $.ajax({
            url: 'http://api.hongyanche.com/maintain_admin/vehicle_info',
            type: 'POST',
            data: {
                customer_id: _ID
            },
            xhrFields:{
                withCredentials:true
            },
            success: function(data) {
                if (data.state) {
                    var datas = data.data.info;
                    createModalHTML(datas);
                } else {
                    TOAST.wran(data.errormsg, ' ', 1);
                }
            },
            error: function(err) {
                TOAST.wran('网络错误', ' ', 1);
            }
        })
    });
    // 修改车辆信息
    $('body').on('click', '#edit', function(event){
        var _ID = $(this).attr('data-id');
        var _vin = $('input.vehicle-create[name=vin]').val();
        var _role = $('input.vehicle-create[name=role]:checked').val();
        var _uname = $('input.vehicle-create[name=uname]').val();
        var _vehicle_license_province = $('.vehicle-create[name=vehicle_license_province]').val();
        var _vehicle_license_number = $('input.vehicle-create[name=vehicle_license_number]').val();
        var _vehicle_brand = $('.vehicle-create[name=vehicle_brand]').val();
        $.ajax({
            url: 'http://api.hongyanche.com/maintain_admin/vehicle_modify',
            type: 'POST',
            data: {
                customer_id: _ID,
                vin: _vin,
                role: _role,
                uname: _uname,
                vehicle_license_number: _vehicle_license_number,
                vehicle_license_province: _vehicle_license_province,
                vehicle_brand: _vehicle_brand
            },
            xhrFields:{
                withCredentials:true
            },
            success: function(data){
                if (data.state) {
                    TOAST.success(data.errormsg, ' ', 1);
                    $('#mask').remove();
                    $('#login').remove();
                } else {
                    TOAST.wran(data.errormsg, ' ', 1);
                }
            },
            error: function(data) {
                TOAST.wran(data.errormsg, ' ', 1);
            }
        })
    });
</script>